<template>
  <div class="chat-root">
    <div class="loading-wrapper" v-show="loadingFlag">
      <Loading></Loading>
    </div>
    <div class="top">
      <el-tooltip class="item" effect="dark" content="点击更换头像" placement="bottom">
        <div class="changeHeadPhoto">
          <img :src='headPhoto' @click="headPhotoListShow = !headPhotoListShow" alt="头像">
        </div>
      </el-tooltip>
      <transition name="el-fade-in-linear">
        <div class="head-photo-list" v-show="headPhotoListShow">
          <img :src='temp' v-for="temp in headPhotos" @click="headPhoto = temp" alt="可选头像">
        </div>
      </transition>
      <div class="changeName">
        <label for="ChatName">修改昵称</label>
        <input type="text" id="ChatName" placeholder="当前昵称：隔壁老王" v-model="chatName" @blur="chatNameBlue"/>
      </div>
    </div>
    <div id="chatList" ref="chatList" class="chatList" @click="chatListClick" :style="{height:this.$parent.fullHeight-350+'px'}" @scroll="chatScroll()">
      <ul>
        <li v-for="chat in chatRecords" :id="chat.id">
          <el-avatar :class="chat.uuid===xlkBlogUuid ? 'chatHeadPhotoRight':'chatHeadPhoto'" shape="square" :size="35" :src="chat.chatHeadPhoto"></el-avatar>
          <div :class="chat.uuid===xlkBlogUuid ? 'chatMsgRight':'chatMsg'">
            <p :class="chat.uuid===xlkBlogUuid ? 'chatNameRight':'chatName'">{{chat.chatName}}</p>
            <p :class="chat.uuid===xlkBlogUuid ? 'chatNameRight':'chatName'">{{chat.time}}</p>
            <pre :class="chat.uuid===xlkBlogUuid ?'chatContentRight':'chatContent'" v-html="chat.chatContent"></pre>
          </div>
        </li>
      </ul>
    </div>
    <el-badge v-model="unread" :class="unread=== 0 ? 'unreadHide' : 'unread'">
      <button @click="scrollTopBottom">未读</button>
    </el-badge>
    <transition name="el-zoom-in-bottom">
      <div class="emoji-box" v-show="emojiShow">
        <ul class="emoji-menu">
          <li v-for="temp in emoji" :class="nowEmojiName===temp.name?'checkedEmoji':'uncheckedEmoji'">
            <span @click="emojiTypeClick(temp)">{{temp.name}}</span>
          </li>
        </ul>
        <ul class="emoji-list">
          <p v-for="temp in nowEmoji.alias" @click="insertText(temp)">{{temp}}</p>
        </ul>
      </div>
    </transition>
    <div class="chat-editor">
      <div class="editor-tools">
        <img class="insert-emoji" src="../assets/images/insertEmoji.png" @click="emojiShow = !emojiShow" alt="插入表情">
        <img class="insert-image" @click="insertImage()" src="../assets/images/insertImage.png"  alt="插入图片">
      </div>
      <div class="editor-box">
        <textarea id="editor" ref="editor" v-model="content" @keydown="keydownEnter"/>
        <button type="button" class="chatSend" @click="chatSend">Enter<br>快捷发送</button>
      </div>
    </div>
  </div>
</template>

<script>
  import Loading from "./Loading";
  export default {
    components: {Loading},
    data(){
      return{
        loadingFlag: true,
        xlkBlogUuid:'',  //cookie标识
        webSocket: null,
        headPhoto: '',
        headPhotos: ['static/images/chatHead/head1.jpg','static/images/chatHead/head2.jpg',
          'static/images/chatHead/head3.jpg','static/images/chatHead/head3.jpg',
          'static/images/chatHead/head4.jpg','static/images/chatHead/head5.jpg',
          'static/images/chatHead/head6.jpg','static/images/chatHead/head7.jpg',
          'static/images/chatHead/head8.jpg','static/images/chatHead/head9.jpg',
          'static/images/chatHead/head10.jpg','static/images/chatHead/head11.jpg',
          'static/images/chatHead/head12.jpg','static/images/chatHead/head13.jpg',
          'static/images/chatHead/head14.jpg','static/images/chatHead/head15.jpg',
          'static/images/chatHead/head16.jpg','static/images/chatHead/head17.jpg',
          'static/images/chatHead/head18.jpg','static/images/chatHead/head19.jpg',
          'static/images/chatHead/head20.jpg',],
        headPhotoListShow: false,  //头像选择框
        chatName: '',
        chatRecords: null,  //聊天记录
        unread: 0, //未读条数
        lastChatTime: null, //记录上一条聊天的时间，计算用于显示时间
        showTimeFlag: false,
        shiftDown: false,  //记录是否按下了shift
        emojiShow: false,  //是否展示表情框
        emoji: {
          face: {
            name: "表情系列",
            alias: ["😄", "😃", "😀", "😊", "😉", "😍", "😘", "😚", "😗", "😙", "😜", "😝", "😛", "😳", "😁", "😔", "😌", "😒", "😞", "😣", "😢", "😂", "😭", "😪", "😥", "😰", "😅", "😓", "😩", "😫", "😨", "😱", "😠", "😡", "😤", "😖", "😆", "😋", "😷", "😎", "😴", "😵", "😲", "😟", "😦", "😧", "😈", "👿", "😮", "😬", "😐", "😕", "😯", "😶", "😇", "😏", "😑", "😺", "😸", "😻", "😽", "😼", "🙀", "😿", "😹", "😾", "👹", "👺", ],
          },
          animal: {
            name: "动物系列",
            alias: ["🐶", "🐺", "🐱", "🐭", "🐹", "🐰", "🐸", "🐯", "🐨", "🐻", "🐷", "🐽", "🐮", "🐗", "🐵", "🐒", "🐴", "🐑", "🐘", "🐼", "🐧", "🐦", "🐤", "🐥", "🐣", "🐔", "🐍", "🐢", "🐛", "🐝", "🐜", "🐞", "🐌", "🐙", "🐚", "🐠", "🐟", "🐬", "🐳", "🐋", "🐄", "🐏", "🐀", "🐃", "🐅", "🐇", "🐉", "🐎", "🐐", "🐓", "🐕", "🐖", "🐁", "🐂", "🐲", "🐡", "🐊", "🐫", "🐪", "🐆", "🐈", "🐩", "🐾", "🙈", "🙉", "🙊", "💀", "👽", "😺", "😸", "😻", "😽", "😼", "🙀", "😿", "😹", "😾", ],
          },
          fruitFood: {
            name: "水果食物",
            alias: ["☕", "🍵", "🍶", "🍼", "🍺", "🍻", "🍸", "🍹", "🍷", "🍴", "🍕", "🍔", "🍟", "🍗", "🍖", "🍝", "🍛", "🍤", "🍱", "🍣", "🍥", "🍙", "🍘", "🍚", "🍜", "🍲", "🍢", "🍡", "🍳", "🍞", "🍩", "🍮", "🍦", "🍨", "🍧", "🎂", "🍰", "🍪", "🍫", "🍬", "🍭", "🍯", "🍎", "🍏", "🍊", "🍋", "🍒", "🍇", "🍉", "🍓", "🍑", "🍈", "🍌", "🍐", "🍍", "🍠", "🍆", "🍅", "🌽", ],
          },
          plantNature: {
            name: "植物自然",
            alias: ["💐", "🌸", "🌷", "🍀", "🌹", "🌻", "🌺", "🍁", "🍃", "🍂", "🌿", "🌾", "🍄", "🌵", "🌴", "🌲", "🌳", "🌰", "🌱", "🌼", "🌐", "🌞", "🌝", "🌚", "🌑", "🌒", "🌓", "🌔", "🌕", "🌖", "🌗", "🌘", "🌜", "🌛", "🌙", "🌍", "🌎", "🌏", "🌋", "🌌", "🌠", "⭐", "☀", "⛅", "☁", "⚡", "☔", "❄", "⛄", "🌀", "🌁", "🌈", "🌊", "🔥", "✨", "🌟", "💫", "💥", "💢", "💦", "💧", "💤", "💨", ],
          },
          zodiac: {
            name: "生肖星座",
            alias: ["🐁", "🐂", "🐅", "🐇", "🐉", "🐍", "🐎", "🐐", "🐒", "🐓", "🐕", "🐖", "♈", "♉", "♊", "♋", "♌", "♍", "♎", "♏", "♐", "♑", "♒", "♓", ],
          },
          sports: {
            name: "运动休闲",
            alias: ["📰", "🎨", "🎬", "🎤", "🎧", "🎼", "🎵", "🎶", "🎹", "🎻", "🎷", "🎸", "👾", "🎮", "🃏", "🎴", "🀄", "🎲", "🎯", "🏈", "🏀", "⚽", "⚾", "🎾", "🎱", "🏉", "🎳", "⛳", "🚵", "🚴", "🏁", "🏇", "🏆", "🎿", "🏂", "🏊", "🏄", "🎣", ],
          },
          person: {
            name: "人物相关",
            alias: ["👂", "👀", "👃", "👅", "👄", "👍", "👎", "👌", "👊", "✊", "✌", "👋", "✋", "👐", "👆", "👇", "👉", "👈", "🙌", "🙏", "☝", "👏", "💪", "🚶", "🏃", "💃", "👫", "👪", "👬", "👭", "💏", "💑", "👯", "🙆", "🙅", "💁", "🙋", "💇", "💅", "👰", "🙎", "🙍", "🙇", "🎩", "👑", "👒", "👟", "👞", "👡", "👠", "👢", "👕", "👔", "👚", "👗", "🎽", "👖", "👘", "👙", "💼", "👜", "👝", "👛", "👓", "🎀", "🌂", "💄", "💋", "👣", "💎", "💍", ],
          },
          trick: {
            name: "花样庆祝",
            alias: ["👑", "🔥", "✨", "🌟", "💫", "💥", "🎀", "🌂", "💄", "💛", "💙", "💜", "💚", "❤", "💔", "💗", "💓", "💕", "💖", "💞", "💘", "💌", "💋", "🎍", "💝", "🎎", "🎒", "🎓", "🎏", "🎆", "🎇", "🎐", "🎑", "🎃", "👻", "🎅", "🎄", "🎁", "🎋", "🎉", "🎊", "🎈", "🎌", ],
          },
          textSeries: {
            name: "文字系列",
            alias: ["🈯", "🈳", "🈵", "🈴", "🈲", "🉐", "🈹", "🈺", "🈶", "🈚", "🚾", "🅿", "🈷", "🈸", "🈂", "Ⓜ", "🉑", "㊙", "㊗", "🆑", "🆘", "🆔", "🔞", "🚫", "🆚", "🅰", "🅱", "🆎", "🅾", "❇", ],
          },
          goods: {
            name: "物体物件",
            alias: ["🔮", "🎥", "📷", "📹", "📼", "💿", "📀", "💽", "💾", "💻", "📱", "☎", "📞", "📟", "📠", "📡", "📺", "📻", "🔊", "🔉", "🔈", "🔇", "🔔", "🔕", "📢", "📣", "⏳", "⌛", "⏰", "⌚", "🔓", "🔒", "🔐", "🔑", "🔎", "💡", "🔦", "🔆", "🔅", "🔌", "🔋", "🔍", "🛁", "🛀", "🚿", "🚽", "🔧", "🔩", "🔨", "🚪", "🚬", "💣", "🔫", "🔪", "💊", "💰", "💴", "💵", "💷", "💶", "💳", "💸", "📲", "📧", "📥", "📤", "✉", "📩", "📨", "📯", "📫", "📪", "📬", "📭", "📮", "📦", "📝", "📄", "📃", "📑", "📊", "📈", "📉", "📜", "📋", "📅", "📆", "📇", "📁", "📂", "✂", "📌", "📎", "✒", "✏", "📏", "📐", "📕", "📗", "📘", "📙", "📓", "📔", "📒", "📚", "📖", "🔖", "📛", "🔬", ],
          },
          signs: {
            name: "各种标识",
            alias: ["🚻", "🚹", "🚺", "🚼", "🚰", "🚮", "♿", "🚭", "🛂", "🛄", "🛅", "🛃", "🚫", "🔞", "🚯", "🚱", "🚳", "🚷", "🚸", "⛔", "✳", "❇", "❎", "✅", "✴", "💟", "📳", "📴", "💠", "➿", "♻", "⛎", "0⃣", "1⃣", "2⃣", "3⃣", "4⃣", "5⃣", "6⃣", "7⃣", "8⃣", "9⃣", "🔟", "⬆", "⬇", "⬅", "➡", "🔣", "🔢", "🔠", "🔡", "🔤", "↗", "↖", "↘", "↙", "↔", "↕", "🔄", "◀", "▶", "🔼", "🔽", "↩", "↪", "ℹ", "⏪", "⏫", "⏬", "⤵", "⤴", "🆗", "🔀", "🔁", "🔂", "🆕", "🆙", "🆒", "🆓", "🆖", "📶", "🎦", "🈁", "🔯", "🏧", "💹", "💲", "💱", "™", "❌", "‼", "⁉", "❗", "❓", "❕", "❔", "⭕", "🔝", "🔚", "🔙", "🔛", "🔜", "🔃", "🕛", "🕧", "🕐", "🕜", "🕑", "🕝", "🕒", "🕞", "🕓", "🕟", "🕔", "🕠", "🕕", "🕖", "🕗", "🕘", "🕙", "🕚", "🕡", "🕢", "🕤", "🕥", "🕦", "➕", "➖", "➗", "♠", "♥", "♣", "♦", "💮", "💯", "✔", "☑", "🔘", "🔗", "➰", "〰", "〽", "🔱", "◼", "◻", "◾", "◽", "▪", "▫", "🔺", "🔲", "🔳", "⚫", "⚪", "🔴", "🔵", "🔻", "🔶", "🔷", "🔸", "🔹", "✖", ],
          },
          RVtraffic: {
            name: "房车交通",
            alias: ["🏠", "🏡", "🏫", "🏢", "🏣", "🏥", "🏦", "🏪", "🏩", "🏨", "💒", "⛪", "🏬", "🏤", "🌇", "🌆", "🏯", "🏰", "⛺", "🏭", "🗼", "🗾", "🗻", "🌄", "🚢", "⛵", "🚤", "🚣", "⚓", "🚀", "✈", "💺", "🚁", "🚂", "🚊", "🚉", "🚞", "🚆", "🚄", "🚅", "🚈", "🚇", "🚝", "🚋", "🚃", "🚎", "🚌", "🚍", "🚙", "🚘", "🚗", "🚕", "🚖", "🚛", "🚚", "🚨", "🚓", "🚔", "🚒", "🚑", "🚐", "🚲", "🚡", "🚟", "🚠", "🚜", "💈", "🚏", "🎫", "🚦", "🚥", "⚠", "🚧", "🔰", "⛽", "🏮", "🎰", "♨", "🗿", "🎪", "🎭", "📍", "🚩", ],
          }
        },  //全部表情
        nowEmoji:{
          name: "表情系列",
          alias: ["😄", "😃", "😀", "😊", "😉", "😍", "😘", "😚", "😗", "😙", "😜", "😝", "😛", "😳", "😁", "😔", "😌", "😒", "😞", "😣", "😢", "😂", "😭", "😪", "😥", "😰", "😅", "😓", "😩", "😫", "😨", "😱", "😠", "😡", "😤", "😖", "😆", "😋", "😷", "😎", "😴", "😵", "😲", "😟", "😦", "😧", "😈", "👿", "😮", "😬", "😐", "😕", "😯", "😶", "😇", "😏", "😑", "😺", "😸", "😻", "😽", "😼", "🙀", "😿", "😹", "😾", "👹", "👺", ],
        },  //当前的表情
        nowEmojiName:'表情系列',  //记录点击的表情类型
        content: '', //输入框内容
        shiftFlag: false, //记录是否按下shift
      }
    },
    methods :{
      //修改名称鼠标离开时验证
      chatNameBlue(){
        if(this.chatName===""){
          this.chatName = '隔壁老王';
        }
      },

      //按shift
      keydownEnter(){
        const setKeyStatus = (e, status) => {
          switch (e.keyCode) {
            case 16:
              this.shiftFlag = status;
              break;
            case 13:
              if(!this.shiftFlag){
                e.preventDefault();
                this.chatSend();
              }
              break;
          }
        };
        document.onkeydown = (e) => {
          setKeyStatus(e, true);
        };
        document.onkeyup = (e) => {
          if(e.keyCode===16){
            this.shiftFlag = false;
          }
        }
      },

      //插入图片
      insertImage(){
        this.$notify({
          title: '警告',
          message: '该功能尚未开放',
          type: 'warning'
        });
      },

      //发送信息
      chatSend(){
        let content = this.$refs.editor.value;
        if(content.length>2500){
          this.$notify({
            title: '警告',
            message: '文字过长哦，减少文字再发送吧',
            type: 'warning'
          });
        }else {
          let jsonParam = '{"chatHeadPhoto":"'+this.headPhoto+'","chatName":"'+this.chatName+'","chatContent":"'+content+'","uuid":"'+this.xlkBlogUuid+'"}';
          this.webSocket.send(jsonParam);
          this.content='';
          setTimeout(this.scrollTopBottom,300)
        }
      },

      //关闭头像和表情选择框
      chatListClick(){
        this.headPhotoListShow = false;
        this.emojiShow = false;
      },

      //侧边栏到底部
      scrollTopBottom(){
        let ele = document.getElementById('chatList');
        ele.scrollTop=ele.scrollHeight;
      },

      //格式化聊天
      formattingParam(val) {
        val = val.replaceAll("{","&#123;");
        val = val.replaceAll("}","&#125;");
        val = val.replaceAll("\"","\'");
        val = val.replaceAll(":","&#58;");
        val = val.replaceAll("[","&#91;");
        val = val.replaceAll("]","&#93;");
        return val;
      },

      //随机获取头像
      randomHeadPhoto(){
        let index = Math.ceil(Math.random()*20);
        this.headPhoto = this.headPhotos[index]
      },

      //随机获取名称
      randomChatName(){
        let names = ["级~","盐焗小星球","捞起月亮的渔民","甜崽小洋","脑袋困掉了","花生了什么树","银河小铁骑","章鱼小肉丸","油炸小可爱","月亮供电不足","汽水味的小盆友","别摸我的婴儿肥","柠檬小丸子","邮一棵草莓","房东的猫","文艺网名","地主的狗","可可西里","齐齐哈尔","少女适俗韵","天亮说晚安","树摇风","醉梦几时","香蕉不娇","细雨挽轻裳","半字浅眉-","盛夏之末","记得微笑 ","人间失格 ","荒野的公寓","森浓有荒","云清雾淡","潇湘雨夜独听琴","海阔山遥","枝上绵蛮","锦瑟华年","青简半卷","又眠秋雨","赫本的猫","在等星星嗎","文艺网名","我和夏天来了","夜子","酒后略带风情","罐装冰块","海棠蚀","花店没开","星光褪色","葡萄味的吻","晚风吹行舟","温吞世俗","月亮降落点","杀手的诗","怎扰春意","收集一杯雾","平行宇宙","月亮列车","低谷有雾","宇宙预报员","何来浪漫","月亮以西","潜入宇宙","巴黎夜雨","六弦绿漪","紫荆私语","久夏青","橘柑橙柠桔柚","蔚蓝的心","如果有如果","野荷的香馥","九月茉莉","你我将岁月两清","喜爱弄人","令我空欢喜","眉目里","拉扯四季","犹如候鸟","高雅有内涵的微信名字","漫过岁月","她已醉","拥抱往事","你别皱眉","云纤","温柔年岁","短暂依赖","猫田喂山风","月亮邮递员","林间有新绿","朵烟熏的埖","穿着碎花裙的少女","回风舞雪","曼珠沙华","深海夜未眠","翻过的亲切","柚花离海","眉温如初","清风饮露","橘和柠","早茶月光","以云为纸","若隐若现","恰似旧人归","淋雨墨心","明目款款","独望风雨满楼","清风予我","长安花落尽","夜来南风起"]
        let index = Math.ceil(Math.random()*names.length);
        this.chatName = names[index]
      },

      //获取uuid
      getUUID() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          let r = Math.random() * 16 | 0,
            v = c === 'x' ? r : (r & 0x3 | 0x8);
          return v.toString(16);
        });
      },

      //webSocket
      webSocketInit(){
        let _this = this;
        let websocket = null;
        let uuid = this.getUUID();
        //判断当前浏览器是否支持WebSocket, 主要此处要更换为自己的地址
        if ('WebSocket' in window) {
          websocket = new WebSocket("ws://localhost:8088/websocket/"+uuid);
          this.webSocket = websocket;
        } else {
          _this.$message({
            showClose: true,
            message: '聊天服务器连接失败，刷新试试',
            center: true,
            type: 'error'
          });
        }

        //连接发生错误的回调方法
        websocket.onerror = function() {
          _this.$message({
            showClose: true,
            message: '聊天服务器连接失败，刷新试试',
            center: true,
            type: 'error'
          });
        };

        // 监听断开连接的方法.
        websocket.onclose = function(event) {
          _this.$message({
            showClose: true,
            message: '与服务器断开了，刷新试试',
            center: true,
            type: 'error',
            offset: 100
          });
          // 如没有业务需求，可以不写这个关闭监听的方法.
          // 业务需求，例如：聊天室，当某人退出的时候，会给出提示，xxx退出了...
        };

        //连接成功建立的回调方法
        websocket.onopen = function() {
          _this.$message({
            showClose: true,
            message: '聊天服务器连接成功',
            center: true,
            type: 'success'
          });
        };

        //接收到消息的回调方法
        websocket.onmessage = function(event) {
          let chat = JSON.parse(event.data);

          let date = new Date(chat.time);
          let Y = date.getFullYear() + '-';
          let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
          let D = date.getDate() + ' ';
          let h = date.getHours() + ':';
          let m = date.getMinutes() + ':';
          let s = date.getSeconds();

          chat["time"] = Y+M+D+h+m+s;

          _this.chatRecords.push(chat);
          _this.unread+=1;
        };

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function() {
          websocket.close();
        };
      },

      //下拉聊天记录
      chatScroll(){
        let _this = this;
        let a = _this.$refs.chatList.scrollHeight;  //内容高度
        let b = _this.$refs.chatList.clientHeight; //可视区
        let c = _this.$refs.chatList.scrollTop;  //距离顶部
        if (b+c >= a-10){
          _this.unread = 0;
        }
      },

      //获取cookie
      getCookie(){ //取cookies函数
        let arr = document.cookie.match(new RegExp("(^| )xlkBlogUuid=([^;]*)(;|$)"));
        if(arr != null){
          this.xlkBlogUuid = unescape(arr[2]);
        }else {
          let uuid = this.getUUID();
          let Days = 3000; //此 cookie 将被保存 30 天
          let exp  = new Date();    //new Date("December 31, 9998");
          exp.setTime(exp.getTime() + Days*24*60*60*1000);
          document.cookie = "xlkBlogUuid="+ escape (uuid) + ";expires=" + exp.toGMTString();
          this.xlkBlogUuid = uuid;
        }
      },

      //表情分类点击时
      emojiTypeClick(emoji){
        this.nowEmoji = emoji;
        this.nowEmojiName = emoji.name;
      },

      //插入表情emoji表情
      insertText(emoji) {
        let input = this.$refs.editor;
        let startPos = input.selectionStart;  //光标开始位置
        let endPos = input.selectionEnd;      //光标结束位置
        let tmpStr = input.value;
        let str  = tmpStr.substring(0, startPos) + emoji + tmpStr.substring(endPos, tmpStr.length);
        input.value = str;
        this.content = str;
        //设置光标往后移一位
        input.setSelectionRange(startPos+2,startPos+2);
      },

    },
    mounted() {

      //获取历史聊天记录
      this.$axios({
        method: 'post',
        url: 'http://localhost:8088/findChats'
      }).then((response) =>{
          this.chatRecords = response.data;
          this.loadingFlag = false;
        }
      ).catch(()=>{
        this.$message({
          message: '聊天记录加载失败，刷新试试',
          type: 'error',
        })
      });

      //初始化一个头像
      this.randomHeadPhoto();

      //初始化一个昵称
      this.randomChatName();

      //选中输入框
      this.$refs.editor.focus();

      //现代浏览器阻止默认事件
      document.getElementsByClassName("editor-tools")[0].onmousedown=function(e){
        //现代浏览器阻止默认事件
        if ( e && e.preventDefault )
          e.preventDefault();
        //IE阻止默认事件
        else
          window.event.returnValue = false;
        return false;
      };
      document.getElementsByClassName("emoji-box")[0].onmousedown=function(e){
        //现代浏览器阻止默认事件
        if ( e && e.preventDefault )
          e.preventDefault();
        //IE阻止默认事件
        else
          window.event.returnValue = false;
        return false;
      };

      //初始化webSocket
      this.webSocketInit();

      //获取一个cookie
      this.getCookie();

    },
    watch: {
      'chatName': {
        // 数据发生变化就会调用这个函数
        handler() {
          if(this.chatName.length>15){
            this.chatName = this.chatName.slice(0,15);
            this.$message({
              message: '名称长度不能超过15个字符',
              type: 'warning'
            });
          }
        },
        immediate: true
      }
    },
    updated() {

    }
  }
</script>

<style scoped>
  .loading-wrapper{
    width: 100%;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
  }
  ul{
    margin: 0;
  }
  .chat-root{
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    position: absolute;
    right: 20px;
    top: 65px;
    left: 100px;
    bottom: 65px;
    border-radius: 15px;
    -webkit-box-shadow: 0 0 10px #878787;
    box-shadow: 0 0 10px #878787;
    margin-right: 55px;
  }
  .top{
    overflow: auto;
    background-image: -webkit-linear-gradient(top, #FFFFFF, #c0c0c0);
    background-image: -moz-linear-gradient(top,  #FFFFFF, #c0c0c0);
    background-image: -o-linear-gradient(top,  #FFFFFF, #c0c0c0);
    background-image: linear-gradient(to bottom,  #FFFFFF, #c0c0c0);
    height: 60px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }
  .changeHeadPhoto{
    margin-left: 20px;
    width: 50px;
    overflow: auto;
    float: left;
    padding: 10px 20px;
  }
  .changeHeadPhoto img {
    float: left;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    object-fit: cover;
    animation-name: brief-img;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }
  .head-photo-list{
    left: 10px;
    background: #fafafa;
    box-shadow: 0 0 15px #575757;
    border: 1px solid #aeaeae;
    border-radius: 5px;
    z-index: 999;
    top: 70px;
    width: 70%;
    position: absolute;

  }
  .head-photo-list img {
    width: 40px;
    height: 40px;
    margin: 5px 5px;
    padding: 10px 10px;
  }
  .head-photo-list img:hover {
    background: #bfbfbf;
    border-radius: 5px;
  }
  @keyframes brief-img {
    img
    {transform: rotate(0deg);}
    to
    {transform: rotate(360deg);}
  }
  .changeName{
    margin-top: 12px;
    float: left;
  }
  .changeName label{
    color: #797979;
    font-size: 12px;
  }
  .changeName input{
    border: 1px solid #DADADA;
    border-radius: 5px;
    color: #888;
    height: 25px;
    margin-bottom: 16px;
    margin-right: 6px;
    margin-top: 2px;
    outline: 0 none;
    padding: 0 3px 0 5px;
    width: 150px;
    line-height:15px;
    box-shadow: inset 0 1px 4px #ECECEC;
    -moz-box-shadow: inset 0 1px 4px #ECECEC;
    -webkit-box-shadow: inset 0 1px 4px #ECECEC;
  }
  .chatList{
    position: absolute;
    padding-top: 10px;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 140px;
    overflow-y: auto;
    border-bottom: rgba(205, 209, 206, 0.66) 1px solid;
  }
  .chatList::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .chatList::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #535353;
  }
  .chatList::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #d2d2d2;
  }
  .chatList ul{
    list-style: none;
  }
  .chatList ul li{
    clear: both;
    padding-right: 30px;
    padding-bottom: 5px;
    margin-bottom: 20px;
    white-space: pre-wrap;
    word-wrap: break-word;

  }
  .chatHeadPhoto{
    float: left;
    vertical-align: top;
  }
  .chatHeadPhotoRight{
    float: right;
    vertical-align: top;
  }
  .chatMsg{
    float: left;
    margin-left: 10px;
    font-size: 12px;
    padding-bottom: 5px;
  }
  .chatMsgRight{
    float: right;
    font-size: 12px;
    padding-bottom: 5px;
  }
  .chatName{
    height: 0;
    color: #179f98;
    margin-top: 0;
    margin-bottom: 3px;
  }
  .chatNameRight{
    height: 0;
    color: #179f98;
    margin-right: 10px;
    text-align: right;
    margin-top: 0;
    margin-bottom: 3px;
  }
  .chatContent{
    float: left;
    min-width: 20px;
    min-height: 15px;
    padding: 5px 5px;
    background: #d6d6d6;
    max-width: 550px;
    border-radius: 5px;
    box-shadow: 0 0 2px #575757;
    display: block;
    font-family: inherit;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
  }
  .chatContentRight{
    float: right;
    margin-right: 10px;
    min-width: 20px;
    min-height: 15px;
    background: #d6d6d6;
    padding: 5px 5px;
    max-width: 550px;
    border-radius: 5px;
    box-shadow: 0 0 2px #575757;
    display: block;
    font-family: inherit;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
  }
  .unread{
    position: relative;
    z-index: 999;
    top: 60%;
    left: 80%;
  }
  .unreadHide{
    visibility: hidden;
    height:40px;
  }
  .unread button{
    display:block;
    width:120px;
    height:40px;
    background-color:#333333;
    color:#FFFFFF;
    text-align:center;
    font-size:18px;
    line-height:40px;
    border-radius: 25px;
    border:none;
    box-shadow:none;
    text-decoration: none;
    transition: box-shadow 0.5s;
    -webkit-transition: box-shadow 0.5s;
  }
  .chat-editor{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
  }
  .editor-tools{
    border: 1px solid #dadada;
    width: 100%;
    border-bottom: none;
  }
  .editor-tools img{
    width: 30px;
    height: 30px;
    margin: 5px 5px;
    display: inline-block; /*一定要将div设置为inline-block*/
    vertical-align: middle;/*设置该元素在父元素中的位置*/
  }
  .emoji-box{
    color: #585858;
    width: 60%;
    position: absolute;
    bottom: 160px;
    left: 10px;
    border: 1px solid #aeaeae;
    border-radius: 5px;
    background: white;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
  }
  .emoji-menu{
    margin: 5px 5px;
    padding-left: 0;
    text-align: center;
    width: 100px;
    height: 150px;
    overflow-y: auto;
    float: left;
    list-style: none;
  }
  .emoji-menu::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 0;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
  }
  .checkedEmoji{
    padding: 5px 0;
    background: #9ecb45;
    border-radius: 10px;
  }
  .uncheckedEmoji{
    padding: 5px 0;
    background: #ffffff;
  }
  .emoji-list{
    padding-left: 10px;
    justify-content: left;
    padding-top: 5px;
    height: 150px;
    background: #ffffff;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
  }
  .emoji-list p{
    float: left;
    margin: 0 0;
    font-size: 20px;
    padding: 5px 5px;
  }
  .emoji-list p:hover{
    background: #bfbfbf;
  }
  .emoji-list::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 0;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
  }
  .editor-box{
    position: relative;
  }
  #editor{
    font-size: 20px;
    border: 1px solid #dadada;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
    resize: none;
    height: 100px;
    width: 100%;
    outline: none;
  }
  .chatSend{
    z-index: 120;
    position: absolute;
    background-image: linear-gradient(to bottom, #3bbf64, #2b8045);
    background-image: -moz-linear-gradient(top, #3bbf64, #2b8045);
    background-image: -o-linear-gradient(top, #3bbf64, #2b8045);
    background-image: linear-gradient(to bottom, #3bbf64, #2b8045);
    font-family: fantasy;
    width: 100px;
    height: 38px;
    right: 85px;
    bottom: 20px;
    border-radius: 5px;
    border: #8e8e8e 1px solid;
  }
  .chatSend:active{
    background-image: linear-gradient(to bottom, #35ad5b, #2b8045);
    background-image: -moz-linear-gradient(top, #35ad5b, #2b8045);
    background-image: -o-linear-gradient(top, #35ad5b, #2b8045);
    background-image: linear-gradient(to bottom, #35ad5b, #2b8045);
  }
</style>

<style>
  .eleImg{
    vertical-align: middle;
  }
  .chatContent p:first-child{
    margin-top: 0;
    margin-bottom: 0;
  }
  .chatContentRight p:first-child{
    margin-top: 0;
    margin-bottom: 0;
  }
</style>

